<template>
    <!-- 等级及数量记录 -->
    <div class="card_nav">
        <div :class="[cardSelected == 'brown' ? 'xm-card-item-active' : '', 'xm-card-item','xm-card-item-brown']" @click="cardClick('brown')">
            <p class="xm-card-title">全部记录</p>
        </div>
        <div :class="[cardSelected == 'green' ? 'xm-card-item-active' : '', 'xm-card-item','xm-card-item-green']" @click="cardClick('green')">
            <p class="xm-card-title">合格</p>
        </div>
        <div :class="[cardSelected == 'red' ? 'xm-card-item-active' : '', 'xm-card-item','xm-card-item-red']" @click="cardClick('red')">
            <p class="xm-card-title">不合格</p>
        </div>
        <div  :class="[cardSelected == 'orange' ? 'xm-card-item-active' : '', 'xm-card-item','xm-card-item-orange']" @click="cardClick('orange')">
            <p class="xm-card-title">降级入库</p>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'filterBtns',
        props: ['cardSelected'],
        data() {
            return {
                
            }
        },
        methods: {
            cardClick (color) {
                this.$emit('changeCondition', );
            },
        },
    }
</script>
<style scoped>
    .card_nav{
        display: flex;
    }
    .card_nav .xm-card-item{
        width: 20%;
    }
</style>